<script setup lang="ts">
import type { GoodItem } from "@/types/hot";

const props = defineProps<{
    good: GoodItem
}>();

</script>

<template>
    <navigator class="good-item"  :url="`/subPackages/detail/detail?id=${good.id}`">
        <image class="image" mode="aspectFill" :src="good.picture"></image>
        <view class="name ellipsis-2">{{ good.name }}</view>
        <view class="price">
            <text class="small">¥</text>
            <text>{{ good.price }}</text>
        </view>
    </navigator>
</template>

<style scoped lang="scss">
.good-item {
    width: 345rpx;
    padding: 24rpx 20rpx 20rpx;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;
    background-color: #fff;
    .image {
        width: 304rpx;
        height: 304rpx;
    }

    .name {
        height: 75rpx;
        margin: 10rpx 0;
        font-size: 26rpx;
        color: #262626;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .price {
        line-height: 1;
        padding-top: 4rpx;
        color: #cf4444;
        font-size: 26rpx;
    }

    .small {
        font-size: 80%;
    }
}
</style>
